<template>
	<view>
		<view class="flexbe top">
			<view class="flexst topl" :class="[!store.userInfo.isCollapse ? 'logobox' : 'logobox2']">
				<image src="../static/logo.png" class="logo"></image>
				<text class="cor-ff b" v-if="!store.userInfo.isCollapse">PC后台管理系统</text>
			</view>
			<view class="flexbe topr" :class="[!store.userInfo.isCollapse ? 'topr-width' : 'topr-width2']">
				<view class="flexst">
					<view @click="setLeftWindow" class="collapse-btn flexce">
						<el-icon v-if="!store.userInfo.isCollapse"><Fold /></el-icon>
						<el-icon v-else><Expand /></el-icon>
					</view>
					<text class="page-title">{{ store.userInfo.pageTitle }}</text>
				</view>
				<view class="flexed info">
					<el-dropdown>
						<view class="flexst ml15">
							<uni-icons type="person" size="16" color="#000000"></uni-icons>
							<view class="ml5">{{ store.userInfo.username }}</view>
						</view>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="showPwdModal">修改密码</el-dropdown-item>
								<el-dropdown-item @click="centerDialogVisible = true">退出</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</view>
			</view>
		</view>
		<!-- 对话框 -->
		<change-password ref="pwdModal" />
		<el-dialog v-model="centerDialogVisible" title="提示" width="30%">
			<span>确定退出登录吗</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="loginOut">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useMenuStore from '@/stores/modules/menu';
import { Expand, Fold } from '@element-plus/icons-vue';
const centerDialogVisible = ref(false);
const store = useMenuStore();
const pwdModal = ref();

// 左侧菜单栏收缩
const setLeftWindow = () => {
	store.userInfo.isCollapse = !store.userInfo.isCollapse;
};

const loginOut = () => {
	centerDialogVisible.value = false;
	uni.clearStorageSync();
	store.userInfo = {};
	uni.redirectTo({
		url: '/pages/login/login'
	});
};

const showPwdModal = () => {
	pwdModal.value.showModal();
};
</script>

<style lang="scss">
.top {
	.topl {
		padding-left: 15px;
		background: #29374b;
		height: 60px;
	}

	.topr-width {
		width: calc(100% - 240px);
	}

	.topr-width2 {
		width: calc(100% - 64px);
	}

	.topr {
		background: #ffffff;
		height: 60px;
		padding-right: 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #eeeeee;

		.tabBtn {
			padding: 0 10px;
			font-size: 12px;
			margin: 0 5px;
			line-height: 24px;
			border: 1px solid #abafb6;
			border-radius: 2px;
			cursor: pointer;

			.mr5 {
				margin-right: 5px;
			}
		}

		.active {
			background: #409eff;
			color: #ffffff;
			border: none;
		}

		.c9 {
			cursor: pointer;
		}

		.ml15 {
			margin-left: 15px;
		}

		.ml5 {
			margin-left: 5px;
		}

		.fs14 {
			font-size: 14px;
		}

		.pl20 {
			padding-left: 20px;
		}
	}
}

.logobox2 {
	width: 64px;
	font-size: 20px;
	padding-left: 20px;
	box-sizing: border-box;

	.logo {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
}

.logobox {
	width: 240px;
	font-size: 20px;
	padding-left: 20px;
	box-sizing: border-box;

	.logo {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
}

.menu {
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

.el-tag {
	margin: 0 5px;
}

.collapse-btn {
	padding: 0 20px;
	height: 60px;
	line-height: 60px;
	cursor: pointer;
}

.el-icon {
	font-size: 20px;
}
.info {
	cursor: pointer;
}
.page-title {
	line-height: 60px;
}
</style>
